<!--以后项目的根路径-->
<template>
    <div>

     <!--1.0利用mint-ui中的header组件实现整个系统的头部-->
        <mt-header fixed title="传智播客.黑马程序员vue商城系统"></mt-header>
       <!--返回按钮-->
        <div id="back">
            <a  v-if="isshow" href="javasrcipt:void(0);" @click="backto">返回</a>
        </div>
        <!--2.0利用vue-router的<router-view>进行占位-->
        <router-view></router-view>
       <!--3.0利mui中的tabber组件实现系统的底部-->
        <nav class="mui-bar mui-bar-tab">
            <router-link class="mui-tab-item" to="/home">
                <span class="mui-icon mui-icon-home"></span>
                <span class="mui-tab-label">首页</span>
            </router-link>
            <router-link class="mui-tab-item" to="/tabbar-with-chat">
                <span class="mui-icon mui-icon-email">
                </span>
                <span class="mui-tab-label">会员</span>
            </router-link>
            <router-link class="mui-tab-item" to="/shopcar/car">
                <span class="mui-icon mui-icon-contact">
                      <span class="mui-badge" id="carCount">0</span>
                </span>
                <span class="mui-tab-label">购物车</span>
            </router-link>
            <router-link class="mui-tab-item" to="#tabbar-with-map">
                <span class="mui-icon mui-icon-gear"></span>
                <span class="mui-tab-label">登录</span>
            </router-link>
        </nav>
    </div>
</template>

<script>
    //按需导入
    import {vm,COUNTNUM} from './kits/vm.js'
    import { Toast } from 'mint-ui';
  //利用vm.$on()来注册COUNTNUM这个常量代表的事件
    //注意这个常量不能是一个关键字
//    vm.$on(COUNTNUM,function (count) {
//        var bgage =document.querySelector("#carCount");
//        bgage.innerText =parseInt(n=bgage.innerText)+count;
//    })
   export default{
        data(){
            return {
                isshow:true
            }
        },
       watch:{
         '$route':function (newroute,oldroute) {
             if(newroute.path.toLowerCase() == "/home"){
                 this.isshow =false;
             }else{
                 this.isshow =true;
             }
         }
       },
        methods:{
            backto(){
                //路由对象go(-1) vue-router
                this.$router.go(-1);

            }
        },
        created(){
          vm.$on(COUNTNUM,function (input) {
              var carCount = document.getElementById("carCount");
              carCount.innerText = parseInt(carCount.innerText)+input;
          })
      }
    }
</script>

<style scoped>
 .red{
     color:red;
 }
 #back{
     width: 60px;
     position: absolute;
     top:10px;
     left:10px;
    z-index: 101;
 }
    #back a{
        color:white;
        font-size: 16px;
        font-weight: 700;
    }
</style>